<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1
			{
				width: 100px;
				height: 100px;
				background-color: aqua;
				 position: absolute;   //开定位很重要
			}
			#box2
			{
				width: 100px;
				height: 100px;
				background-color: blue;
				position: absolute;
				margin-top: 300px;
			}
			body
			{
				width: 2000px;
				height: 2000px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var box1=document.getElementById("box1");
				box1.onmousedown=function()
				{
					document.onmousemove=function(event)
					{
						event=event||window.event;
						var x=event.clientX;
						var x1=document.body.scrollLeft||document.documentElement.scrollLeft;
						var y=event.clientY;
						var y1=document.body.scrollTop||document.documentElement.scrollTop;
						box1.style.left=x+x1+"px";
						box1.style.top=y+y1+"px";
					}
					document.onmouseup=function()   /* 这里也要用document*/
					{
						document.onmousemove=null;
						document.onmouseup=null;
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>   <!-- 兄弟之间没有冒泡-->
	</body>
</html>